<template>
  <div>
    <el-form ref="mainForm" size="medium" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="地块名称" prop="name">
        <el-input v-model="formData.name" placeholder="名称" clearable disabled />
      </el-form-item>
      <el-form-item label="土壤类型" prop="soil_id">
        <el-select v-model="formData.soil_id" clearable filterable>
          <el-option
            v-for="(item,index) in soils"
            :key="index"
            :label="item.name"
            :value="+item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="容重" prop="unit_weight">
        <el-input v-model="formData.unit_weight" type="number" placeholder="容重" disabled clearable>
          <template slot="append">g/cm3</template>
        </el-input>
      </el-form-item>
      <el-form-item label="田间持水量" prop="field_capacity">
        <el-input v-model="formData.field_capacity" type="number" placeholder="田间持水量" disabled clearable />
      </el-form-item>
      <el-form-item label="凋萎系数" prop="wilting_coefficient">
        <el-input v-model="formData.wilting_coefficient" type="number" placeholder="凋萎系数" disabled clearable />
      </el-form-item>
      <el-form-item label="饱和含水率" prop="water_content">
        <el-input v-model="formData.water_content" type="number" placeholder="饱和含水率" disabled clearable />
      </el-form-item>
      <el-form-item label="地表径流" prop="runoff_curve">
        <el-input v-model="formData.runoff_curve" type="number" placeholder="地表径流" disabled clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('mainForm')">提交</el-button>
        <el-button @click="reset('mainForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['soils'])
  },
  watch: {
    'formData.soil_id': {
      handler(newVal, oldVal) {
        const attrs = ['unit_weight', 'field_capacity', 'wilting_coefficient', 'water_content', 'runoff_curve']
        const soil = this.soils.filter(val => {
          return +val.id === +newVal
        })
        if (soil && soil.length > 0) {
          attrs.forEach((item) => {
            this.formData[item] = soil[0][item] || ''
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = { soil_id: this.formData.soil_id, name: this.formData.name }
          this.$emit('soilSubmit', formData, this.formData.id)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
